<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>API接口测试</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 40px;
      }
      .test-section {
        margin: 20px 0;
        padding: 20px;
        border: 1px solid #ddd;
      }
      button {
        padding: 8px 16px;
        margin: 5px;
        cursor: pointer;
      }
      .result {
        margin-top: 10px;
        padding: 10px;
        background: #f5f5f5;
      }
      .error {
        color: red;
      }
      .success {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>mgpulsetech API接口测试</h1>

    <div class="test-section">
      <h3>1. 测试算法列表接口</h3>
      <button onclick="testAlgorithmList()">获取算法列表</button>
      <div id="algorithm-result" class="result"></div>
    </div>

    <div class="test-section">
      <h3>2. 测试算法框架列表接口</h3>
      <button onclick="testFrameworkList()">获取框架列表</button>
      <div id="framework-result" class="result"></div>
    </div>

    <div class="test-section">
      <h3>3. 测试资源列表接口</h3>
      <button onclick="testResourceList()">获取资源列表</button>
      <div id="resource-result" class="result"></div>
    </div>

    <script>
      const API_BASE = "http://47.116.120.242:8000";

      async function testAlgorithmList() {
        const resultDiv = document.getElementById("algorithm-result");
        try {
          const response = await fetch(`${API_BASE}/algorithms/list`);
          const data = await response.json();
          resultDiv.className = "result success";
          resultDiv.innerHTML = `<strong>成功:</strong><br><pre>${JSON.stringify(
            data,
            null,
            2
          )}</pre>`;
        } catch (error) {
          resultDiv.className = "result error";
          resultDiv.innerHTML = `<strong>错误:</strong> ${error.message}`;
        }
      }

      async function testFrameworkList() {
        const resultDiv = document.getElementById("framework-result");
        try {
          const response = await fetch(
            `${API_BASE}/algorithms/list_frameworks`,
            {
              method: "POST",
            }
          );
          const data = await response.json();
          resultDiv.className = "result success";
          resultDiv.innerHTML = `<strong>成功:</strong><br><pre>${JSON.stringify(
            data,
            null,
            2
          )}</pre>`;
        } catch (error) {
          resultDiv.className = "result error";
          resultDiv.innerHTML = `<strong>错误:</strong> ${error.message}`;
        }
      }

      async function testResourceList() {
        const resultDiv = document.getElementById("resource-result");
        try {
          const response = await fetch(`${API_BASE}/resources/list`);
          const data = await response.json();
          resultDiv.className = "result success";
          resultDiv.innerHTML = `<strong>成功:</strong><br><pre>${JSON.stringify(
            data,
            null,
            2
          )}</pre>`;
        } catch (error) {
          resultDiv.className = "result error";
          resultDiv.innerHTML = `<strong>错误:</strong> ${error.message}`;
        }
      }
    </script>
  </body>
</html>
